<template>
  <div class="relative">

    <div v-if="VAindex == 1">
      <div class="w-full h-[91px] flex flex-row items-center justify-between s2k:h-[121.3px] s4k:h-[182px]">
        <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px] flex flex-col">
          <span class="text-[2rem] text-[var(--theme-font-color)] font-[600] font-Inter">VA Store</span>
        </div>
      </div>
      <div class="flex flex-row items-center justify-start">
        <div class="flex flex-row justify-start items-center pl-[24px] s2k:pl-[32px] s4k:pl-[48px]">
          <div class="w-[23.177vw] flex flex-row justify-between items-center h-[37px] s4k:h-[74px] relative">
            <svg-icon name="vsstore" width="16px" height="16px"
              class="absolute right-[20%] z-[99] svgClass s2ksvg s4ksvg"></svg-icon>
            <fwb-input v-model="searchCamera" placeholder="Search" id="searchCamera" style="width: 100%">
              <template #prefix>
                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400 s4k:w-7 s4k:h-7" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="2" />
                </svg>
              </template>
            </fwb-input>
            <button class="w-[90px] h-[38px] bg-[var(--theme-button-bg)] text-white border-solid rounded-r-md border-[var(--grid)] border-[1px] cursor-pointer text-[1.13rem]
                s4k:w-[180px] s4k:h-[76px] s2k:w-[120px] s2k:h-[50.6px] s2k:rounded-r-[8px]">
              Search
            </button>
          </div>
          <button
            class="cursor-pointer w-[98px] h-[38px] border-solid border-[var(--grid)] border-[1px] rounded-md flex flex-row justify-evenly items-center ml-[10px] bg-[var(--theme)] s4k:w-[196px] s4k:h-[76px] s4k:ml-[20px] s2k:w-[130.6px] s2k:h-[50.6px] s2k:ml-[13.3px] s2k:rounded-[8px] relative"
            @click="show">
            <svg-icon name="filter" width="12px" height="12px" class="svgClass s2ksvg s4ksvg"></svg-icon>
            <div class="text-[1.13rem] text-[#9CA3AF] font-Medium ">Filter</div>
            <svg-icon name="down" width="10.8px" height="18px"
              :class="['svgClass s2ksvg s4ksvg', { 'svgRotate': filterShow }]"></svg-icon>
            <div v-show="filterShow"
              class="absolute left-0 top-[45px] w-[28.958vw] h-auto bg-[var(--theme)]  rounded-md s4k:top-[90px] s2k:top-[60px] z-[999] pb-[16px] s2k:px-[21.3px] s4k:px-[32px] border border-solid border-[var(--grid)]">
              <div
                class="text-[#6B7280] flex flex-row justify-start text-[1rem] font-SemiBold pl-[16px] s4k:pl-[32px] s2k:pl-[21.3px]  mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px]">
                TYPES
              </div>
              <div id="radio"
                class="w-[calc(100%_-_32px)] m-auto flex flex-wrap justify-between mt-[10px] s4k:w-[calc(100%_-_64px)] s4k:mt-[20px] s2k:w-[calc(100%_-_42.6px)] s2k:mt-[13.3px]">
                <div class="w-[100%] my-[4px] s2k:my-[5.3px] s4k:my-[8px] flex flex-row justify-start items-center"
                  v-for="v in types" :key="v.name">
                  <fwb-radio v-model="FilterData.type" :label="v.name" :value="v.value" />
                  <span class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]"
                    v-if="v?.num">(<span>{{ v.num }}</span>)</span>
                </div>
              </div>
              <div
                class="w-[calc(100%_-_32px)] m-auto h-[1px] bg-[var(--grid)] my-[8px] s4k:w-[calc(100%_-_64px)] s4k:my-[16px] s2k:w-[calc(100%_-_42.6px)] s2k:my-[10.6px]">
              </div>
              <div
                class="text-[#6B7280] flex flex-row justify-start text-[1rem] font-SemiBold pl-[16px] s4k:pl-[32px] s2k:pl-[21.3px]  mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px]">
                CREDIT
              </div>
              <div id="radio"
                class="w-[calc(100%_-_32px)] m-auto flex flex-wrap justify-between mt-[10px] s4k:w-[calc(100%_-_64px)] s4k:mt-[20px] s2k:w-[calc(100%_-_42.6px)] s2k:mt-[13.3px]">
                <div class="w-[48%] my-[4px] s2k:my-[5.3px] s4k:my-[8px] flex flex-row justify-start items-center"
                  v-for="v in credits" :key="v.name">
                  <fwb-radio v-model="FilterData.credit" :label="v.name" :value="v.value" />
                  <span class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]"
                    v-if="v?.num">(<span>{{ v.num }}</span>)</span>
                </div>
              </div>
              <div
                class="w-[calc(100%_-_32px)] m-auto h-[1px] bg-[var(--grid)] my-[8px] s4k:w-[calc(100%_-_64px)] s4k:my-[16px] s2k:w-[calc(100%_-_42.6px)] s2k:my-[10.6px]">
              </div>
              <div class="flex flex-row justify-start items-center mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px]">

                <div class="px-[12px] s2k:px-[16px] s4k:px-[24px] h-[37px] bg-[var(--theme-search-bg)] border border-[var(--grid)] border-solid rounded-md text-center leading-[37px] text-[1.13rem] text-[var(--theme-font-color)] cursor-pointer ml-[16px] s4k:w-[216px] s4k:h-[74px] s4k:leading-[74px] s4k:text-[28px] s4k:ml-[32px]
          s2k:w-[144px] s2k:h-[49.3px] s2k:rounded-[8px] s2k:leading-[49.3px] s2k:ml-[21.3px]">Clear
                </div>
                <div class="px-[12px] s2k:px-[16px] s4k:px-[24px] h-[37px] bg-[var(--theme-search-bg)] border border-[var(--grid)] border-solid rounded-md text-center leading-[37px] text-[1.13rem] text-[var(--theme-font-color)] cursor-pointer ml-[16px] s4k:w-[216px] s4k:h-[74px] s4k:leading-[74px] s4k:text-[28px] s4k:ml-[32px]
          s2k:w-[144px] s2k:h-[49.3px] s2k:rounded-[8px] s2k:leading-[49.3px] s2k:ml-[21.3px]">Apply Filters
                </div>
              </div>
            </div>
          </button>
        </div>
        <div class="ml-auto flex flex-row justify-end">
          <div @click="VAindex = 2"
            class="w-[145px] h-[41px] flex flex-row items-center justify-center bg-[var(--theme-button-bg)] cursor-pointer rounded-md s4k:rounded-[16px] mr-[24px] s2k:mr-[32px] s4k:mr-[48px] s2k:w-[192px] s2k:h-[54.6px] s4k:w-[290px] s4k:h-[82px]">
            <svg-icon name="like" class="svgLogo s2ksvg s4ksvg ml-[3px] s4k:ml-[6px]" width="14px"
              height="14px"></svg-icon>
            <span
              class="text-[1.167rem] text-[var(--theme-font-color)] font-Medium font-[400] ml-[10px] mr-[4px] s4k:ml-[20px] s4k:mr-[12px]">MyFavorites</span>
          </div>
          <div @click="MyCart"
            class="w-[114px] h-[41px] flex flex-row items-center justify-center bg-[var(--theme-button-bg)] cursor-pointer rounded-md s4k:rounded-[16px] mr-[24px] s2k:mr-[32px] s4k:mr-[48px] s2k:w-[152px] s2k:h-[54.6px] s4k:w-[228px] s4k:h-[82px]">
            <svg-icon name="buy" class="svgLogo s2ksvg s4ksvg ml-[3px] s4k:ml-[6px]" width="14px"
              height="14px"></svg-icon>
            <span
              class="text-[1.167rem] text-[var(--theme-font-color)] font-Medium font-[400] ml-[10px] mr-[4px] s4k:ml-[20px] s4k:mr-[12px]">My
              cart</span>
          </div>
        </div>
        <div class="mask" v-show="maskShow" @click="back"></div>
      </div>
    </div>
    <div v-else
      class="w-full h-[91px] flex flex-row items-center justify-between s2k:h-[121.3px] s4k:h-[182px] border-b border-solid border-[var(--grid)]">
      <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px] flex flex-col">
        <span class="text-[2rem] text-[var(--theme-font-color)] font-[600] font-Inter">{{ VATitle }}</span>
      </div>
      <div class="ml-auto flex flex-row justify-end">
        <div
          class="w-[152px] h-[41px] bg-[#1A56DB] cursor-pointer rounded-md s4k:rounded-[16px] mr-[24px] s2k:mr-[32px] s4k:mr-[48px] s2k:w-[202.66px] s2k:h-[54.6px] s4k:w-[304px] s4k:h-[82px] flex"
          @click="VAindex = 1">
          <span class="text-[1.167rem] text-white font-Medium font-[400] m-auto">Back to VA Store</span>
        </div>
      </div>
    </div>
    <div v-if="VAindex == 3"
      class="storeList h-[calc(100vh_-_274px)] s2k:h-[calc(100vh_-_365.3px)] s4k:h-[calc(100vh_-_548px)] px-[24px] s2k:px-[32px] s4k:px-[48px] flex flex-wrap justify-between border-t border-[var(--grid)] border-solid pt-[4px] s2k:pt-[5.3px] s4k:pt-[8px]">
      <div
        class="w-[46.3%] h-[90px] s2k:h-[120px] s4k:h-[180px] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] flex flx-row justify-start items-center border border-solid border-[var(--grid)] mt-[12px] s2k:mt-[16px] s4k:mt-[24px]"
        v-for="v in CartList" :key="v.id">
        <input type="checkbox" id="checkbox" v-model="v.checked" @change="checkboxChange(v)" class="w-[16px] h-[16px] text-[1.5rem] rounded border border-solid border-[var(--grid)] bg-[var(--inputBg)] cursor-pointer s4k:rounded-[4px] mr-[16px] s2k:mr-[21.3px] s4k:mr-[32px]">
        <img src="@/assets/image/vastore1.png" alt=""
          class="w-[120px] s2k:w-[160px] s4k:w-[240px] h-[80px] s2k:h-[106px] s4k:h-[160px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
        <div class="ml-[24px] s2k:ml-[32px] s4k:ml-[48px]">
          <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
            <span>Crowd Analysis</span>
            <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">Publisher name</span>
          </div>
          <div class="flex flex-row justify-start items-center mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px]">
            <div class="flex flex-row justify-start items-center cursor-pointer">
              <svg-icon name="like" class="svgClass s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
              <span class="text-[var(--theme-font-desc-color)] text-[1.13rem] ml-[4px] s2k:ml-[5.3px] s4k:ml-[8px]">Add to Favorites</span>
            </div>
            <div class="flex flex-row justify-start items-center ml-[16px] s2k:ml-[21.3px] s4k:ml-[32px] cursor-pointer">
              <svg-icon name="close" class="text-[#E02424] s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
              <span class="text-[#E02424] text-[1.13rem] ml-[4px] s2k:ml-[5.3px] s4k:ml-[8px]">Remove</span>
            </div>
          </div>
        </div>
        <div class="flex flex-row justify-start items-center ml-[100px] s2k:ml-[133.3px] s4k:ml-[200px]">
          <div
            class="w-[20px] h-[20px] s2k:w-[26.6px] s2k:h-[26.6px] s4k:w-[40px] s4k:h-[40px] bg-[var(--theme-search-bg)] border border-solid border-[var(--grid)] rounded-[4px] s2k:rounded-[5.3px] s4k:rounded-[8px] flex cursor-pointer" @click="subNum(v)">
            <svg-icon name="sub" width="10px" height="10px" class="svgClass s2ksvg s4ksvg m-auto"></svg-icon>
          </div>
          <div class="w-[36px] s2k:w-[48px] s4k:w-[72px] h-[20px] s2k:h-[26.6px] s4k:h-[40px] flex"><span
              class="m-auto text-[1.13rem] text-[var(--theme-font-color)]">{{v.num}}</span></div>
          <div
            class="w-[20px] h-[20px] s2k:w-[26.6px] s2k:h-[26.6px] s4k:w-[40px] s4k:h-[40px] bg-[var(--theme-search-bg)] border border-solid border-[var(--grid)] rounded-[4px] s2k:rounded-[5.3px] s4k:rounded-[8px] flex cursor-pointer" @click="addNum(v)">
            <svg-icon name="add" width="10px" height="10px" class="svgClass s2ksvg s4ksvg m-auto"></svg-icon>
          </div>
        </div>
        <div class="flex flex-row justify-start items-center ml-auto">
          <div class="relative mr-[24px] s2k:mr-[32px] s4k:mr-[48px]">
            <span class="text-strike2 text-[1.3rem] text-[var(--theme-font-color)] font-[600]">1 Credit</span>
          </div>
          <div
            class="w-[46px] h-[22px] s2k:w-[61.3px] s2k:h-[29.3px] s4k:w-[92px] s4k:h-[44px] rounded-[6px] s2k:rounded-[8px] s4k:rounded-[12px] bg-[#E1EFFE] flex">
            <span class="m-auto text-[1rem] text-[#1E429F]">Free</span>
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="VAindex != 3 && AllListShow == false"
      :class="['font-Inter storeList px-[24px] s2k:px-[32px] s4k:px-[48px] flex flex-wrap justify-between pt-[4px] s2k:pt-[5.3px] s4k:pt-[8px]', VAindex == 1 ? 'h-[calc(100vh_-_330px)] s2k:h-[calc(100vh_-_440px)] s4k:h-[calc(100vh_-_660px)]' : 'h-[calc(100vh_-_274px)] s2k:h-[calc(100vh_-_365.3px)] s4k:h-[calc(100vh_-_548px)]', VAindex == 1?'mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px] border-t border-[var(--grid)] border-solid':'']">
      <!-- Perimeter Security and Surveillance -->
      <div class="w-full mt-[12px] s2k:mt-[16px] s4k:mt-[24px] flex" v-show="VAindex == 1">
        <span class="text-[2rem] text-[var(--theme-font-color)]">Perimeter Security and Surveillance</span>
        <span class="text-[1.67rem] text-[#1C64F2] ml-auto cursor-pointer" @click="SeeAll(1)">See All</span>
      </div>
      <div
        class="w-[46.3%] min-h-[150px] s2k:min-h-[200px] s4k:min-h-[300px] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] flex flx-row justify-start border border-solid border-[var(--grid)] mt-[12px] s2k:mt-[16px] s4k:mt-[24px]"
        v-for="v in Perimeter.data.slice(0, 4)" :key="v.title">
        <img :src="v.imgUrl" alt=""
          class="w-[180px] s2k:w-[240px] s4k:w-[360px] h-[120px] s2k:h-[160px] s4k:h-[240px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
        <div class="w-full ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px]">
          <div class="w-full flex flex-row justify-between items-start">
            <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
              <span>{{ v.title }}</span>
              <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">{{v.subheading}}</span>
            </div>
            <div class="flex flex-row justify-end">
              <div v-if="VAindex == 2"
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="dele" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div v-else
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="like" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div
                class="w-[138px] s2k:w-[184px] s4k:w-[276px] h-[30px] s2k:h-[40px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#1A56DB] flex flex-row justify-center items-center cursor-pointer">
                <svg-icon name="buy" class="svgLogo s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
                <span class="text-white text-[1.13rem] ml-[8px] s2k:ml-[10.6px] s4k:ml-[16px]">Add to cart</span>
              </div>
            </div>
          </div>
          <div
            class="w-full text-[var(--theme-font-desc-color)] text-[1.13rem] leading-[160%] my-[12px] s2k:my-[16px] s4k:my-[24px]">{{v.desc}}</div>
          <div class="flex flex-row justify-start items-center">
            <div class="relative mr-[30px] s2k:mr-[40px] s4k:mr-[60px]">
              <span class="text-strike text-[2rem] text-[var(--theme-font-color)] font-[600]">1 Credit</span>
            </div>
            <div
              class="w-[46px] h-[22px] s2k:w-[61.3px] s2k:h-[29.3px] s4k:w-[92px] s4k:h-[44px] rounded-[6px] s2k:rounded-[8px] s4k:rounded-[12px] bg-[#E1EFFE] flex">
              <span class="m-auto text-[1rem] text-[#1E429F]">Free</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Facilities Management and Optimisation  -->
      <div class="w-full mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px] flex" v-show="VAindex == 1">
        <span class="text-[2rem] text-[var(--theme-font-color)]">Facilities Management and Optimisation </span>
        <span class="text-[1.67rem] text-[#1C64F2] ml-auto cursor-pointer" @click="SeeAll(2)">See All</span>
      </div>
      <div
        class="w-[46.3%] min-h-[150px] s2k:min-h-[200px] s4k:min-h-[300px] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] flex flx-row justify-start border border-solid border-[var(--grid)] mt-[12px] s2k:mt-[16px] s4k:mt-[24px]"
        v-for="v in Facillity.data.slice(0, 4)" :key="v.title">
        <img :src="v.imgUrl" alt=""
          class="w-[180px] s2k:w-[240px] s4k:w-[360px] h-[120px] s2k:h-[160px] s4k:h-[240px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
        <div class="w-full ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px]">
          <div class="w-full flex flex-row justify-between items-start">
            <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
              <span>{{ v.title }}</span>
              <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">{{v.subheading}}</span>
            </div>
            <div class="flex flex-row justify-end">
              <div v-if="VAindex == 2"
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="dele" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div v-else
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="like" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div
                class="w-[138px] s2k:w-[184px] s4k:w-[276px] h-[30px] s2k:h-[40px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#1A56DB] flex flex-row justify-center items-center cursor-pointer">
                <svg-icon name="buy" class="svgLogo s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
                <span class="text-white text-[1.13rem] ml-[8px] s2k:ml-[10.6px] s4k:ml-[16px]">Add to cart</span>
              </div>
            </div>
          </div>
          <div
            class="w-full text-[var(--theme-font-desc-color)] text-[1.13rem] leading-[160%] my-[12px] s2k:my-[16px] s4k:my-[24px]">{{v.desc}}</div>
          <div class="flex flex-row justify-start items-center">
            <div class="relative mr-[30px] s2k:mr-[40px] s4k:mr-[60px]">
              <span class="text-strike text-[2rem] text-[var(--theme-font-color)] font-[600]">1 Credit</span>
            </div>
            <div
              class="w-[46px] h-[22px] s2k:w-[61.3px] s2k:h-[29.3px] s4k:w-[92px] s4k:h-[44px] rounded-[6px] s2k:rounded-[8px] s4k:rounded-[12px] bg-[#E1EFFE] flex">
              <span class="m-auto text-[1rem] text-[#1E429F]">Free</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Transportation and Infrastructure Management -->
      <div class="w-full mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px] flex" v-show="VAindex == 1">
        <span class="text-[2rem] text-[var(--theme-font-color)]">Transportation and Infrastructure Management</span>
        <span class="text-[1.67rem] text-[#1C64F2] ml-auto cursor-pointer" @click="SeeAll(3)">See All</span>
      </div>
      <div
        class="w-[46.3%] min-h-[150px] s2k:min-h-[200px] s4k:min-h-[300px] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] flex flx-row justify-start border border-solid border-[var(--grid)] mt-[12px] s2k:mt-[16px] s4k:mt-[24px]"
        v-for="v in Transportation.data.slice(0, 4)" :key="v.title">
        <img :src="v.imgUrl" alt=""
          class="w-[180px] s2k:w-[240px] s4k:w-[360px] h-[120px] s2k:h-[160px] s4k:h-[240px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
        <div class="w-full ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px]">
          <div class="w-full flex flex-row justify-between items-start">
            <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
              <span>{{ v.title }}</span>
              <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">{{v.subheading}}</span>
            </div>
            <div class="flex flex-row justify-end">
              <div v-if="VAindex == 2"
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="dele" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div v-else
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="like" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div
                class="w-[138px] s2k:w-[184px] s4k:w-[276px] h-[30px] s2k:h-[40px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#1A56DB] flex flex-row justify-center items-center cursor-pointer">
                <svg-icon name="buy" class="svgLogo s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
                <span class="text-white text-[1.13rem] ml-[8px] s2k:ml-[10.6px] s4k:ml-[16px]">Add to cart</span>
              </div>
            </div>
          </div>
          <div
            class="w-full text-[var(--theme-font-desc-color)] text-[1.13rem] leading-[160%] my-[12px] s2k:my-[16px] s4k:my-[24px]">{{v.desc}}</div>
          <div class="flex flex-row justify-start items-center">
            <div class="relative mr-[30px] s2k:mr-[40px] s4k:mr-[60px]">
              <span class="text-strike text-[2rem] text-[var(--theme-font-color)] font-[600]">1 Credit</span>
            </div>
            <div
              class="w-[46px] h-[22px] s2k:w-[61.3px] s2k:h-[29.3px] s4k:w-[92px] s4k:h-[44px] rounded-[6px] s2k:rounded-[8px] s4k:rounded-[12px] bg-[#E1EFFE] flex">
              <span class="m-auto text-[1rem] text-[#1E429F]">Free</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Industrial and Workplace Safetly -->
      <div class="w-full mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px] flex" v-show="VAindex == 1">
        <span class="text-[2rem] text-[var(--theme-font-color)]">Industrial and Workplace Safetly</span>
        <span class="text-[1.67rem] text-[#1C64F2] ml-auto cursor-pointer" @click="SeeAll(4)">See All</span>
      </div>
      <div
        class="w-[46.3%] min-h-[150px] s2k:min-h-[200px] s4k:min-h-[300px] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] flex flx-row justify-start border border-solid border-[var(--grid)] mt-[12px] s2k:mt-[16px] s4k:mt-[24px]"
        v-for="v in Industrital.data.slice(0, 4)" :key="v.title">
        <img :src="v.imgUrl" alt=""
          class="w-[180px] s2k:w-[240px] s4k:w-[360px] h-[120px] s2k:h-[160px] s4k:h-[240px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
        <div class="w-full ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px]">
          <div class="w-full flex flex-row justify-between items-start">
            <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
              <span>{{ v.title }}</span>
              <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">{{v.subheading}}</span>
            </div>
            <div class="flex flex-row justify-end">
              <div v-if="VAindex == 2"
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="dele" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div v-else
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="like" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div
                class="w-[138px] s2k:w-[184px] s4k:w-[276px] h-[30px] s2k:h-[40px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#1A56DB] flex flex-row justify-center items-center cursor-pointer">
                <svg-icon name="buy" class="svgLogo s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
                <span class="text-white text-[1.13rem] ml-[8px] s2k:ml-[10.6px] s4k:ml-[16px]">Add to cart</span>
              </div>
            </div>
          </div>
          <div
            class="w-full text-[var(--theme-font-desc-color)] text-[1.13rem] leading-[160%] my-[12px] s2k:my-[16px] s4k:my-[24px]">{{v.desc}}</div>
          <div class="flex flex-row justify-start items-center">
            <div class="relative mr-[30px] s2k:mr-[40px] s4k:mr-[60px]">
              <span class="text-strike text-[2rem] text-[var(--theme-font-color)] font-[600]">1 Credit</span>
            </div>
            <div
              class="w-[46px] h-[22px] s2k:w-[61.3px] s2k:h-[29.3px] s4k:w-[92px] s4k:h-[44px] rounded-[6px] s2k:rounded-[8px] s4k:rounded-[12px] bg-[#E1EFFE] flex">
              <span class="m-auto text-[1rem] text-[#1E429F]">Free</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Health and Safety Compliance -->
      <div class="w-full mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px] flex" v-show="VAindex == 1">
        <span class="text-[2rem] text-[var(--theme-font-color)]">Health and Safety Compliance</span>
        <span class="text-[1.67rem] text-[#1C64F2] ml-auto cursor-pointer" @click="SeeAll(5)">See All</span>
      </div>
      <div
        class="w-[46.3%] min-h-[150px] s2k:min-h-[200px] s4k:min-h-[300px] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] flex flx-row justify-start border border-solid border-[var(--grid)] mt-[12px] s2k:mt-[16px] s4k:mt-[24px]"
        v-for="v in Health.data.slice(0, 4)" :key="v.title">
        <img :src="v.imgUrl" alt=""
          class="w-[180px] s2k:w-[240px] s4k:w-[360px] h-[120px] s2k:h-[160px] s4k:h-[240px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
        <div class="w-full ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px]">
          <div class="w-full flex flex-row justify-between items-start">
            <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
              <span>{{ v.title }}</span>
              <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">{{v.subheading}}</span>
            </div>
            <div class="flex flex-row justify-end">
              <div v-if="VAindex == 2"
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="dele" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div v-else
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="like" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div
                class="w-[138px] s2k:w-[184px] s4k:w-[276px] h-[30px] s2k:h-[40px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#1A56DB] flex flex-row justify-center items-center cursor-pointer">
                <svg-icon name="buy" class="svgLogo s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
                <span class="text-white text-[1.13rem] ml-[8px] s2k:ml-[10.6px] s4k:ml-[16px]">Add to cart</span>
              </div>
            </div>
          </div>
          <div
            class="w-full text-[var(--theme-font-desc-color)] text-[1.13rem] leading-[160%] my-[12px] s2k:my-[16px] s4k:my-[24px]">{{v.desc}}</div>
          <div class="flex flex-row justify-start items-center">
            <div class="relative mr-[30px] s2k:mr-[40px] s4k:mr-[60px]">
              <span class="text-strike text-[2rem] text-[var(--theme-font-color)] font-[600]">1 Credit</span>
            </div>
            <div
              class="w-[46px] h-[22px] s2k:w-[61.3px] s2k:h-[29.3px] s4k:w-[92px] s4k:h-[44px] rounded-[6px] s2k:rounded-[8px] s4k:rounded-[12px] bg-[#E1EFFE] flex">
              <span class="m-auto text-[1rem] text-[#1E429F]">Free</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Others -->
      <div class="w-full mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px] flex" v-show="VAindex == 1">
        <span class="text-[2rem] text-[var(--theme-font-color)]">Others</span>
        <span class="text-[1.67rem] text-[#1C64F2] ml-auto cursor-pointer" @click="SeeAll(6)">See All</span>
      </div>
      <div
        class="w-[46.3%] min-h-[150px] s2k:min-h-[200px] s4k:min-h-[300px] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] flex flx-row justify-start border border-solid border-[var(--grid)] mt-[12px] s2k:mt-[16px] s4k:mt-[24px]"
        v-for="v in Others.data.slice(0, 4)" :key="v.title">
        <img :src="v.imgUrl" alt=""
          class="w-[180px] s2k:w-[240px] s4k:w-[360px] h-[120px] s2k:h-[160px] s4k:h-[240px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
        <div class="w-full ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px]">
          <div class="w-full flex flex-row justify-between items-start">
            <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
              <span>{{ v.title }}</span>
              <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">{{v.subheading}}</span>
            </div>
            <div class="flex flex-row justify-end">
              <div v-if="VAindex == 2"
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="dele" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div v-else
                class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
                <svg-icon name="like" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
              </div>
              <div
                class="w-[138px] s2k:w-[184px] s4k:w-[276px] h-[30px] s2k:h-[40px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#1A56DB] flex flex-row justify-center items-center cursor-pointer">
                <svg-icon name="buy" class="svgLogo s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
                <span class="text-white text-[1.13rem] ml-[8px] s2k:ml-[10.6px] s4k:ml-[16px]">Add to cart</span>
              </div>
            </div>
          </div>
          <div
            class="w-full text-[var(--theme-font-desc-color)] text-[1.13rem] leading-[160%] my-[12px] s2k:my-[16px] s4k:my-[24px]">{{v.desc}}</div>
          <div class="flex flex-row justify-start items-center">
            <div class="relative mr-[30px] s2k:mr-[40px] s4k:mr-[60px]">
              <span class="text-strike text-[2rem] text-[var(--theme-font-color)] font-[600]">1 Credit</span>
            </div>
            <div
              class="w-[46px] h-[22px] s2k:w-[61.3px] s2k:h-[29.3px] s4k:w-[92px] s4k:h-[44px] rounded-[6px] s2k:rounded-[8px] s4k:rounded-[12px] bg-[#E1EFFE] flex">
              <span class="m-auto text-[1rem] text-[#1E429F]">Free</span>
            </div>
          </div>
        </div>
      </div>
    </div>  
    <AllList v-if="AllListShow == true" :VAindex="VAindex" :typeTitle="typeTitle" @hideSeeAll="hideSeeAll" :SeeAllList="SeeAllList"/>
    <div v-else-if="AllListShow == false && VAindex == 1 || VAindex == 2"
      class="w-full h-[64px] absolute bottom-[-70px] s2k:bottom-[-93.33px] s4k:bottom-[-140px] z-[999] bg-theme s4k:h-[128px] s2k:h-[85.3px]">
      <div
        class="w-full h-[100%] border-solid border-[1px] border-[var(--grid)] flex flex-row justify-between items-center px-[16px] bg-[var(--theme)] s4k:px-[32px] s2k:px-[21.3px] relative"
        style="border-left: none;border-right: none;border-bottom: none;">
        <div class="text-[1.13rem] text-[#9CA3AF] font-Medium">
          Showing <span class="text-[var(--theme-font-color)]">1-10</span> of <span
            class="text-[var(--theme-font-color)]">1000</span>
        </div>
        <fwb-pagination @page-changed="pageChanged" id="pagination" v-model="currentPage" :total-pages="1000" show-icons
          previous-label="" next-label=""></fwb-pagination>
      </div>
    </div>
    <div v-else-if="AllListShow == false && VAindex == 3"
      class="w-full h-[64px] absolute bottom-[-70px] s2k:bottom-[-93.33px] s4k:bottom-[-140px] z-[999] bg-theme s4k:h-[128px] s2k:h-[85.3px]">
      <div
        class="w-full h-[100%] border-solid border-[1px] border-[var(--grid)] px-[16px] bg-[var(--theme)] s4k:px-[32px] s2k:px-[21.3px] flex flex-row justify-start items-center"
        style="border-left: none;border-right: none;border-bottom: none;">
        <input type="checkbox" v-model="checkAll" @change="selectAllItems" class="w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] text-[1.5rem] rounded border border-solid border-[var(--grid)] bg-[var(--inputBg)] cursor-pointer s4k:rounded-[4px] ">
        <span class="text-[1.13rem] text-[var(--theme-font-color)] font-Inter ml-[20px] s2k:ml-[26.6px] s4k:ml-[40px]">All</span>
        <span class="text-[1.13rem] text-[var(--theme-font-color)] font-Inter ml-auto">{{selectedItems.length}} Items selected</span>
        <div
          class="w-[107px] h-[41px] bg-[#1A56DB] cursor-pointer rounded-md s4k:rounded-[16px] mr-[30px] s2k:mr-[40px] s4k:mr-[60px] s2k:w-[142.6px] s2k:h-[54.6px] s4k:w-[214px] s4k:h-[82px] ml-[20px] s2k:ml-[26.6px] s4k:ml-[40px] flex" @click="goMyVA">
          <span class="text-[1.167rem] text-white font-Medium font-[400] m-auto">Download</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Perimeter from '@/json/Perimeter.json'
import Facillity from '@/json/Facillity.json'
import Transportation from '@/json/Transportation.json'
import Industrital from '@/json/Industrital.json'
import Health from '@/json/Health.json'
import Others from '@/json/Others.json'
import { onMounted, reactive, ref, nextTick, watch } from "vue";
import { FwbInput, FwbRadio, FwbPagination } from "flowbite-vue";
import { useRouter } from "vue-router";
const router = useRouter()
import settingStore from '@/store/modules/setting'
const store = settingStore()
import AllList from './allList.vue'
import Footer from "./footer.vue";
import img1 from '@/assets/image/vastore1.png'
import img2 from '@/assets/image/vastore2.png'
import img3 from '@/assets/image/vastore3.png'
import img4 from '@/assets/image/vastore4.png'
const VATitle = ref('')
const VAindex = ref(1)
const searchCamera = ref("");
const filterShow = ref(false);
const maskShow = ref(false); // 遮罩层
const FilterData = reactive({
  type: '1',
  credit: '1',
})
watch(VAindex, (newValue) => {
  if (newValue == 1) return VATitle.value = ''
  if (newValue == 2) return VATitle.value = 'My Favorites'
  if (newValue == 3) return VATitle.value = 'My Cart'
})
const show = () => {
  filterShow.value = true;
  maskShow.value = true;
};
const back = () => {
  filterShow.value = false;
  maskShow.value = false;
};
const types = ref([
  { name: 'All', value: '1' },
  { name: 'Perimeter Security and Surveillance', value: '2', num: '21' },
  { name: 'Facilities Management and Optimisation', value: '3', num: '19' },
  { name: 'Transportation and Infrastructure Management', value: '4', num: '22' },
  { name: 'Industrial and Workplace Safetly', value: '5', num: '15' },
  { name: 'Health and Safety Compliance', value: '6', num: '5' },
  { name: 'Others', value: '7', num: '5' },
])
const credits = ref([
  { name: 'All', value: '1' },
  { name: '3 Credit', value: '2', num: '3' },
  { name: '1 Credit', value: '3', num: '3' },
  { name: '4 Credit', value: '4', num: '3' },
  { name: '2 Credit', value: '5', num: '3' },
  { name: '5 Credit', value: '5', num: '3' },
])
const PerimeterListShow = ref([])
// Perimeter Security and Surveillance
const PerimeterList = ref([
  { name: 'Perimeter Surveillance', desc: 'Video analytics for perimeter surveillance uses AI for real-time intrusion detection and zone monitoring, ensuring rapid, intelligent security response.', credits: 1, img: img1 },
  { name: 'Intrusion Detection', desc: 'Video analytics for intrusion detection uses AI to identify and analyse unauthorised entries in real-time, ensuring prompt security responses.', credits: 2, img: img2 },
  { name: 'Loitering Detection', desc: 'Video analytics for loitering detection uses AI to identify and analyse suspicious lingering, ensuring timely security alerts and responses.', credits: 3, img: img3 },
  { name: 'Secure Perimeter Monitoring', desc: 'Video analytics for secure perimeter monitoring uses AI to detect and analyse threats, ensuring rapid and effective security responses.', credits: 4, img: img4 },
])

const typeTitle = ref('')
const AllListShow = ref(false)
const SeeAllList = ref([])
const SeeAll = (num) => {
  AllListShow.value = true
    if (num == 1){ 
      typeTitle.value = 'Perimeter Security and Surveillance'
      SeeAllList.value = Perimeter
      return false
  }
    if (num == 2){ 
      typeTitle.value = 'Facilities Management and Optimisation'
      SeeAllList.value = Facillity
      return false
  }
    if (num == 3){ 
      typeTitle.value = 'Transportation and Infrastructure Management'
      SeeAllList.value = Transportation
      return false
  }
    if (num == 4){ 
      typeTitle.value = 'Industrial and Workplace Safetly'
      SeeAllList.value = Industrital
      return false
  }
    if (num == 5){ 
      typeTitle.value = 'Health and Safety Compliance'
      SeeAllList.value = Health
      return false
  }
    if (num == 6){ 
      typeTitle.value = 'Other'
      SeeAllList.value = Others
      return false
  }
}
const hideSeeAll = () => {
  AllListShow.value = false
}
// 分页
const currentPage = ref(1)
const pageChanged = (val) => {
  console.log('val', val)
}
// MyCart
const MyCart = () => {
  VAindex.value = 3
  AllListShow.value = false
}
// 全选
const checkAll = ref(false); // 全选
const selectedItems = ref([]); // 多个
const CartList = ref([]);
for (let i = 0; i < 20; i++) {
  CartList.value.push({
    id: i + 1,
    checked: false,
    num: 1,
  });
}
// 多选
const checkboxChange = (item) => {
  if (item.checked) {
    selectedItems.value.push(item);
  } else {
    const index = selectedItems.value.findIndex((selectedItem) => selectedItem === item);
    if (index > -1) {
      selectedItems.value.splice(index, 1);
    }
  }
};
// 全选
const selectAllItems = () => {
  CartList.value.forEach((item) => (item.checked = checkAll.value));
  if (checkAll.value) {
    selectedItems.value = [...CartList.value];
  } else {
    selectedItems.value = [];
  }
};
// add
const addNum = (obj) => {
  const index = CartList.value.findIndex((item) => obj === item);
  CartList.value[index].num++
}
// sub
const subNum = (obj) => {
  if(obj.num == 1) return false
  const index = CartList.value.findIndex((item) => obj === item);
  CartList.value[index].num--
}
const goMyVA = () => {
  router.push('/Vas/myva')
  store.setVAindex(2)
}
</script>

<style lang="scss" scoped>
.storeList {
  overflow-y: scroll;
  margin-right: 10px;
}

.storeList::-webkit-scrollbar {
  width: 4px;
}

.storeList::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
}

.storeList::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  border-radius: 10px;
}

.text-strike::after {
  content: '';
  position: absolute;
  top: 90%;
  left: 0;
  width: 100px;
  height: 2px;
  background-color: #1C64F2;
  transform: rotate(-15deg);
  transform-origin: 0 0;
}

.text-strike2::after {
  content: '';
  position: absolute;
  top: 90%;
  left: 0;
  width: 70px;
  height: 2px;
  background-color: #1C64F2;
  transform: rotate(-15deg);
  transform-origin: 0 0;
}

.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

#pagination {
  margin-right: 32px;

  :deep(button) {
    border: solid var(--grid) 1px;
    border-right: none;
    border-radius: 0;
    width: 32px;
    height: 32px;
    font-size: 1.13rem;
    color: #9CA3AF;
    background-color: var(--theme);
    cursor: pointer;

    &:last-child {
      padding-left: 7px;
      padding-right: 7px;
      border-right: solid var(--grid) 1px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;

      svg {
        transform: scale(1.3);
      }
    }

    &:first-child {
      padding-left: 7px;
      padding-right: 7px;
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;

      svg {
        transform: scale(1.3);
      }
    }
  }

  :deep(.text-blue-600) {
    color: var(--theme-font-color);
    font-weight: 600;
    background-color: var(--layout-progress-bg);
  }
}

#searchCamera {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 1.13rem;
    font-family: Medium;
    color: var(--theme-font-color);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}

#radio {
  :deep(label) {
    width: auto;

    input {
      border: solid 1px var(--grid);
      background-color: var(--inputBg);
      cursor: pointer;
      height: 16px;
      width: 16px;

      &:checked {
        border: solid 4px #1C64F2;
        background-color: var(--theme-font-color);
        // border-color: #111928;
      }

      &:focus {
        box-shadow: inset 0 0;
      }
    }

    .text-sm {
      color: var(--theme-font-color);
      font-size: 1.13rem;
      font-family: Medium;
    }
  }
}

@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.2);
  }

  .text-strike::after {
    width: 133.33px;
    height: 2.66px;
  }

  .text-strike2::after {
    width: 93.33px;
    height: 2.66px;
  }

  #searchCamera {
    :deep(input) {
      height: 48px;
      padding-left: 40px;
    }
  }

  #radio {
    :deep(label) {
      input {
        width: 21.3px;
        height: 21.3px;

        &:checked {
          border: solid 5.3px #1C64F2;
        }
      }
    }
  }
  #pagination{
      margin-right: 42.6px;
      :deep(button){
        width: 50px;
        height: 50px;
        &:last-child{
          padding-left: 9.3px;
          padding-right: 9.3px;
          svg{
            transform: scale(1.5);
          }
        }
        &:first-child{
          padding-left: 9.3px;
          padding-right: 9.3px;
          svg{
            transform: scale(1.5);
          }
        }
      }
    }
}

@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(1.8) !important;
  }

  .text-strike::after {
    width: 200px;
    height: 4px;
  }

  .text-strike2::after {
    width: 140px;
    height: 4px;
  }

  #searchCamera {
    :deep(input) {
      height: 72px;
      padding-left: 80px;
    }
  }

  #radio {
    :deep(label) {
      input {
        width: 32px;
        height: 32px;

        &:checked {
          border: solid 8px #1c64f2;
        }
      }
    }
  }
  #pagination{
      margin-right: 64px;
      :deep(button){
        height: 64px;
        &:last-child{
          padding-left: 14px;
          padding-right: 14px;
          svg{
            transform: scale(2);
          }
        }
        &:first-child{
          padding-left: 14px;
          padding-right: 14px;
          svg{
            transform: scale(2);
          }
        }
      }
    }
}
</style>
